import React, { useState, useRef, useEffect } from 'react'
import { Space, Table, Tag, Modal, Button, message, Tooltip } from 'antd';
import { getrisk, finduser } from '@/api/hazard'
import Showuser from '@/components/showuserinfo/index'
const Animalmanagement = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const [userdata, setUser] = useState([])
  const [infodata, setinfo] = useState([])
  const [isinfoVisible, setinfoVisible] = useState(false)
  const UpdateForm = useRef(null)
  const { confirm } = Modal
  const getdata = async () => {
    let { data: { users } } = await getrisk();
    setUser(users)
  }
  useEffect(() => {
    getdata()
  }, [])
  const showinfo = async (item) => {
    let { id, name } = item;
    setinfo(item)
    await finduser(id).then((response) => {
      let { data: { userdata } } = response;
      setinfo(userdata[0])
      setinfoVisible(true)
    }).catch(e => {
      message.error("数据返回错误,该用户信息不存在")
    })
  }
  const handleOk = () => {
    setinfoVisible(false)
    console.log( window.document.getElementById('xiuer').innerHTML);
    window.document.body.innerHTML = window.document.getElementById('xiuer').innerHTML;
    window.print();
    window.location.reload();
  };
  const text = <span>用户信息打印下载</span>;
  const columns = [
    {
      title: '体检号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '体检人',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <h3>{text}</h3>,
    },
    {
      title: '体检时间',
      dataIndex: 'date',
      key: 'date',
      render: (text) => <h3>{text}</h3>,
    },
    {
      title: "操作",
      render: (item) => {
        return <div>
          <a onClick={() => showinfo(item)}>点击我查看用户分析报告</a>
        </div>
      }
    }
  ]
  return (
    <div>
      <Table columns={columns} dataSource={userdata}
        pagination={{
          pageSize: 6
        }}
        rowKey={item => item.id} />
      <Modal
        open={isinfoVisible}
        destroyOnClose={true}
        title="用户健康分析"
        width={900}
        onCancel={() => {
          setinfoVisible(false)
        }}
        footer={[
          <Button key="back" onClick={() => setinfoVisible(false)}>
            关闭
          </Button>,
          <Tooltip key="submit" placement="bottomLeft" title={text} >
            <Button type="primary" onClick={handleOk}>下载打印</Button>
          </Tooltip>
        ]}>
        <Showuser ref={infodata}></Showuser>
      </Modal>
    </div>
  )
}
export default Animalmanagement